<template>
	<transition name='fade'>
		<div class='pages comfirm'>
		    <van-contact-card
			  :type="cardType"
			  :name="currentContact.name"
			  :tel="currentContact.tel"
			  @click="showList = true"
			/>

			<van-popup v-model="showList" position="bottom">
			  <van-contact-list
			    v-model="chosenContactId"
			    :list="addressList"
			    @add="onAdd"
			    @edit="onEdit"
			    @select="onSelect"
			  />
			</van-popup>

			<div class='content'>
				<div class='' v-for="(item1, index1) in shops" :key="item1.id">
					<div class="shop flex-y w">
	              	  <!-- 循环店铺 -->
		              <img class="cart-shop-cover" :src="item1.cover"></img>
		              <div class="flex1 flex-y" style="color: #222; font-size: 14px; letter-spacing: 1px">
		              	{{ item1.name }}
		                <Icon type="ios-arrow-right" class='icon'></Icon>
		              </div>
		            </div>
					
					<div>
						<van-card
						  :title="item2.name"
						  :num="item2.num"
						  :price="item2.price"
						  :thumb="item2.cover"
						  v-for="(item2, index2) in item1.products"
						  :key="item2.id"
						/>
					</div>

					<div class='order-info'>
						<div class='line flex-y'>
							<span class='left'>配送信息</span>
							<span class='right flex1'> 你们 </span>
						</div>

						<div class='line flex-y'>
							<span class='left'>运费</span>
							<span class='right flex1'>0.00</span>
						</div>

						<div class='line flex-y'>
							<span class='left'>优惠券</span>
							<span class='right flex1'>0.00</span>
						</div>

						<div class='line flex-y'>
							<span class='left'>备注</span>
							<span class='right flex1'>
								<input type="text" placeholder="请输入你的留言。。。" ref='remarks' />
							</span>
						</div>

						<div class='line flex-y'>
							<span class='right ssum flex1'>共2件商品 小计: ￥<em>{{ orderSum(item1) }}</em></span>
						</div>
					</div>
				</div>
			</div>
			
			<!-- <q-r :value="qrcodeUrl" :qrcodeUrl="qrcodeUrl" :hidden="qrcodeShow" @close="closeQR" @checkPay="checkPay"></q-r> -->
			<alert btnText="我已经付款" ref='wx'>
			</alert>

			<van-submit-bar
			  :price="totalPrice"
			  button-text="提交订单"
			  @submit="onSubmit"
			/>
				<div class='tip'>
					<van-checkbox disabled>全选</van-checkbox>
					<span slot="tip">
					  您的收货地址不支持同城送, <span class="change">修改地址</span>
					</span>
				</div>
			</van-submit-bar>	
		</div>
	</transition>
</template>

<script>
	import Alert 		from 'base/alert'
	
	export default{
		components: {
			Alert
		},
		data() {
			
			return {
				 qrcodeShow 	: false,
				 chosenContactId: null,
			     editingContact: {},
			     currentContact: {},
			     showList: false,
			     showEdit: false,
			     isEdit: false,
			     addressList: [{
			       name: '张三',
			       tel: '13000000000',
			       id: 0
			     }],
			     shops 		: [],
			     totalPrice : 0,
			     qrcodeUrl  : '',
			     timer 		: null,
			     type 		: 'scan'
			}
		},
		computed: {
		  cardType() {
		    return this.currentContact.name ? 'edit' : 'add';
		  }
		},
		created() {
			
		},
		activated() {
			let carts = this.util.getStorageSync('carts')

			if(carts) {
				console.log(carts, 'carts')
				this.shops 			= carts
				this.getAddress()
			}
		},
		updated() {
			let totalPrice = 0
			this.shops.forEach((n1, i1) => {
				n1.products.forEach((n2, i2) => {
					totalPrice += n2.price * n2.num
				})
			})
			this.totalPrice = totalPrice * 100
		},
		methods: {	
		    onSubmit() {
		    	let s 	 		= this.shops
		    	let t    		= this.type
		    	let remarks		= this.$refs.remarks
		    	let wx 			= this.$refs.wx

		    	console.log(wx, this.$refs)
		    	let nss  		= []
		    		s.forEach((n1, i1) => {
		    			let ns = {}
		    				ns.id 			= n1.id
		    				ns.remarks 		= remarks[i1].value
		    				ns.products 	= []
		    				n1.products.forEach((n2, i2) => {
		    					let o = {}
		    						o.id 		= n2.id
		    						o.sku_id 	= n2.sku_id
		    						o.num 		= n2.num
		    						ns.products.push(o)
		    				})

		    			nss.push(ns)	
		    		})

		    	this.HttpService.AOrder({address: this.currentContact, shops: nss, type: t}).then(data => {
		    		let d = data.data
		    		if(!data.status) {
		    			this.$Message.success(data.msg)
		    			wx.pay(d)
		    		} else {
		    			this.$Message.error(data.msg)
		    		}
		    	})
		    },
		    // pay(ids) {
		    // 	let t          = this.type
		    // 	this.HttpService.H5Pay({type: t, ids: ids}).then(data => {
		    // 		let d   			= data.data
		    // 		if(!data.status) {
		    // 			this.qrcodeShow = true
		    // 			this.qrcodeUrl 	= d.qr_code
		    // 			this.timer      = setInterval(() => {
		    // 				this.checkPay(d.out_trade_no)
		    // 			}, 3000)
		    // 		} else {
		    // 			this.$Message.error(data.msg)
		    // 		}
		    // 	})
		    // },
		    closeQR(a) {

		    },
		    // checkPay(i) {
		    // 	this.HttpService.query({out_trade_no: i}).then(data => {
		    // 		let d   = data.data
		    // 		if(!data.status && d.trade_status == 'TRADE_SUCCESS') {
		    // 			clearInterval(this.timer)
			   //  		this.$Message.success(data.msg)
		    // 			setTimeout(() => {
		    // 				this.qrcodeShow = false
		    // 				this.$router.push('/order/lists?status=0')
		    // 			}, 1000)
		    // 		}
		    // 	})
		    // },
		    getAddress() {
				this.HttpService.GAddress().then(data => {
					let dl 				= data.addressList
					let dd 				= data.default
					data.default.tel    = dd.phone
					for(let i = 0, len 	= dl.length; i < len; i++) {
						let o 			= dl[i]
							o.tel 		=	o.phone
					}
					this.chosenContactId= dd.id
					this.currentContact = dd
					this.addressList	= dl

				})
			},
			onAdd() {
		      this.$router.push('/shop/address')
		      this.isEdit = false;
		      this.showEdit = true;
		    },

		    // 编辑联系人
		    onEdit(item) {
		      this.$router.push('/shop/address?id=' + item.id)	
		      this.isEdit = true;      
		      this.showEdit = true;
		    },

		    // 选中联系人
		    onSelect(a) {
		      this.currentContact = a
		      this.showList = false;
		    },

		    // 保存联系人
		    onSave(info) {
		      this.showEdit = false;
		      this.showList = false;
		      
		      if (this.isEdit) {
		        this.list = this.list.map(item => item.id === info.id ? info : item);
		      } else {
		        this.list.push(info);
		      }
		      this.chosenContactId = info.id;
		    },

		    // 删除联系人
		    onDelete(info) {
		      this.showEdit = false;
		      this.list = this.list.filter(item => item.id !== info.id);
		      if (this.chosenContactId === info.id) {
		        this.chosenContactId = null;
		      }
		    },
		    orderSum(n) {
		    	let TP 		     = 0
		    	n.products.forEach((n1, i1) => {
		    		TP += n1.price * n1.num
		    	})
		    	return TP
		    }
		}
	}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
	@import "~@/common/stylus/variable.styl"
	@import "~@/common/stylus/mixin.styl"
	@import "~@/common/stylus/confirm.styl"			
</style>